<template>
  <div class="video-list" style="margin: 0 1em;">
    <h1 class="topic-list-title">视频列表</h1>
    <div v-for="video in videos" :key="video.id" class="video-item">
      <img :src="video.cover" alt="" class="video-cover">
      <video controls :src="video.url" class="video-player">
      </video>
      <div class="video-info">
        <h3 class="video-title">{{ video.title }}</h3>
        <p class="video-views">{{ video.views }} 次播放</p>
      </div>
    </div>
  </div>
</template>


<script>
import { ref } from 'vue'
export default {
  name: "Video",
  setup() {
    const videos = ref([
      {
        id: 1,
        title: '格力电器将继续发展手机业务，并将向全产业覆盖！',
        url: 'https://ips.ifeng.com/video19.ifeng.com/video09/2021/05/26/p6803231351488126976-102-8-161249.mp4?reqtype=tsl&vid=2c791e3b-444e-4578-83e3-f4808228ae3b&uid=0puFR4&from=v_Free&pver=vHTML5Player_v2.0.0&sver=&se=&cat=&ptype=&platform=pc&sourceType=h5&dt=1622096387396&gid=6a4poXmsep1E&sign=39f76885daca6503ebf90acbfffc1ff1&tm=1622096387396.mp4',
        cover: 'https://www.example.com/cover1.jpg',
        views: 10000
      },
      {
        id: 2,
        title: '你用上5G了吗？我国5G手机终端达3.1亿 占全球比例超80％',
        url: 'https://video19.ifeng.com/video09/2021/05/26/p6803268684325330944-102-8-184104.mp4?reqtype=tsl&vid=ec74b1e4-d1fa-488b-aaf5-71984ca7d13e&uid=1Vun5L&from=v_Free&pver=vHTML5Player_v2.0.0&sver=&se=&cat=&ptype=&platform=pc&sourceType=h5&dt=1622096310639&gid=fg3vsXmseXFv&sign=38e7c790561e1fd1b57e61a1cbd8031c&tm=1622096310639&vkey=4NYnZM3hSN7LTz6Gn1qx12hNCZN8aDSWFHzok8B7aDvdXw37PA2uLMPeIJGERMtXqcXUPuYw2hTu7Y%2BA6bQpyyIqOnzcn%2F3dnba9B15XOrhl%2B7C3oOq96IeLt3J033jmEKMzaPXm%2FGXvjz6nLv9862d3JQtzq8n1GdX7NNZ5qtDPTsjtH3z4DQMYXdbip8WUzsc8DoRm9QkwheykUYf4%2B6WeinFsQIMYw90%2F7%2BV62eXnaJZkN6ex61N10d1Z9Z7TmhzRUv46mFPD0LWE0sUdmQKRNOEi5IeYCCPeM7q1Eg4%3D',
        cover: 'https://www.example.com/cover2.jpg',
        views: 20000
      }
      // 其他视频...
    ])
    return {
      videos
    }
  }
}
</script>

<style scoped>
.topic-list-title {
  font-size: 24px;
  text-align: center;
  margin: 1em auto;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
}

.video-item {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  /* 16:9 比例缩放 */
}

.video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}

.video-title {
  font-size: 18px;
  margin: 0;
}

.video-views {
  font-size: 14px;
  margin: 5px 0 0 0;
}

@media (min-width: 768px) {
  .video-item {
    width: 50%;
  }
}
</style>

